<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蔡艺婷</title>
    <link rel="stylesheet" href="./css/style01.css">
    <link rel="stylesheet" href="./css/all.min.css">
    <link rel="stylesheet" href="./css/case01.css">
    <!-- 2.改title的标题 -->
</head>
<body>
    <!-- 1. "!"回车/tab键快速生成代码 -->
    <!-- 3.body里面写内容 
        主要内容是在body里面写的 
    --> 
    <!-- 一个图片+4个无序列表 -->
    <!-- header、banner、footer是共用的 -->
     <header>
        <div class="container"></div>
        <div class="logo">
            <!-- 拖住图片放到代码中，按住shift插入代码的任意位置 -->
            <img src="img/logo_white.png" alt="">
        </div>
        <!-- ul是无序列表 -->
        <ul>
            <!-- _blank:新窗口,_self:自窗口 -->
            <li ><a href="index01.html" target=_self>首页</a></li>
            <li class="actived"><a href="case01.html" target=_self>最新案例</a></li>
            <li><a href="about01.html" target=_self>关于我们</a></li>
            <li><a href="" target=_self>联系我们</a></li>
        </ul>
        <div class="clear">

            <!-- .clear  div.clear -->
        </div>
    
     </header>
    <div class="banner">
        <div class="main-text">
            <!-- .+类名 --><!-- #+id名 -->
            <h1><!-- h1包含大标题 -->独具匠心 专注品质</h1>
                 <span>
                    <!-- lorem/lorem30:生成随机乱序的30个字母 -->
                    <!-- 乱数假文 -->
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Id ducimus ullam similique vel? Et ea eos perferendis ducimus laudantium vero rerum odit asperiores dolores, unde quod vel qui, fuga impedit.
                    <!-- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Autem inventore dolorem consequatur et, neque delectus assumenda temporibus quaerat quo dignissimos eveniet est atque voluptates quasi minima beatae. Magni, quis a. -->
                    <!-- 1. lorem
                        用法1:lorem 回车
                        效果:自动生成 30 个单词
                        用法2:lorem+n
                        效果:指定生成单词个数
                        用法3:.dlorem*n
                        效果:指定生成多行文本:用法4:loremn'm效果:指定生成多行文本，每行几个单词
                     -->
                 </span>
        </div>
    </div>

    <!-- 图片列表模块 -->
    <div class="container lists">
        <div class="title">
            最新案例
        </div>

     <div class="pic-lists">
        <div class="pic-list">
            <img src="img/pic1.jpg" alt="">
            <div class="pic-title">
                自由创意
            </div>
         
        </div>
        <div class="pic-list">
            <img src="img/pic1.jpg" alt="">
            <div class="pic-title">
                自由创意
            </div>
         
        </div>
        <div class="pic-list">
            <img src="img/pic1.jpg" alt="">
            <div class="pic-title">
                自由创意
            </div>
       
        </div>
        <div class="pic-list">
            <img src="img/pic1.jpg" alt="">
            <div class="pic-title">
                自由创意
            </div>
         
        </div>
        <div class="pic-list">
            <img src="img/pic1.jpg" alt="">
            <div class="pic-title">
                自由创意
            </div>
         
        </div>
        <div class="pic-list">
            <img src="img/pic1.jpg" alt="">
            <div class="pic-title">
                自由创意
            </div>
           
        </div>
     </div>
    </div>

   
    
    <footer class="center">
    <!-- center 居中属性 -->
    Copyright &copy; 2024XXXXX公司版权所有
    </footer>
</body>
</html>
